<template>
    <div>
     <!--面包屑导航区-->
     <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item>商品管理</el-breadcrumb-item>
           <el-breadcrumb-item>分类参数</el-breadcrumb-item>
       </el-breadcrumb>
       <el-card>
        <!--头部警告-->
        <el-alert
            title="注意：只允许为第三级分类设置相关参数！"
            type="warning" show-icon
            :closable="false">
        </el-alert>
        <!--选择商品分类-->
        <el-row class="cat_opt">
          <el-col>
            <div width="100%">
            <el-form>
              <el-form-item label="选择商品分类：">
                <!--options 用来指定数据源-->
                <!--props 用来指定配置对象-->
                <el-cascader
                    v-model="selectedKeys"
                    :options="catelist"
                    :props="{ expandTrigger: 'hover',
                              value:'cat_id',
                              label:'cat_name',
                              children:'children'  }"
                    @change="handleChange">
                </el-cascader>
              </el-form-item>
            </el-form>
            </div>
          </el-col>
        </el-row>
        <!--tab页签区域-->
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <!--添加动态参数的面板-->
            <el-tab-pane label="动态参数" name="many" >
                <el-button type="primary" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加参数</el-button>
                <!--动态参数表格-->
                <el-table :data="manyTableData" border stripe>
                  <el-table-column type='expand' label="">
                    <template slot-scope="scope">
                        <!--循环渲染标签-->
                        <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i"
                        closable :disable-transitions="false"  @close="handleClose(i,scope.row)">{{item}}</el-tag>
                       <!--输入的文本框-->
                        <el-input
                            class="input-new-tag"
                            v-if="scope.row.inputVisible"
                            v-model="scope.row.inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm(scope.row)"
                            @blur="handleInputConfirm(scope.row)"
                            >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column type='index' label="#"></el-table-column>
                  <el-table-column label="参数名称" prop="attr_name"></el-table-column>
                  <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="delParam(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </el-tab-pane>
            <!--添加静态属性的面板-->
            <el-tab-pane label="静态属性" name="only" >
                <el-button type="primary" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加属性</el-button>
                <!--静态参数表格-->
                <el-table :data="onlyTableData" border stripe>
                    <el-table-column type='expand' label="">
                    <template slot-scope="scope">
                        <!--循环渲染标签-->
                        <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i"
                        closable :disable-transitions="false"  @close="handleClose(i,scope.row)">{{item}}</el-tag>
                       <!--输入的文本框-->
                        <el-input
                            class="input-new-tag"
                            v-if="scope.row.inputVisible"
                            v-model="scope.row.inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm(scope.row)"
                            @blur="handleInputConfirm(scope.row)"
                            >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column type='index' label="#"></el-table-column>
                  <el-table-column label="属性名称" prop="attr_name"></el-table-column>
                  <el-table-column label="操作" >
                  <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="delParam(scope.row)">删除</el-button>
                  </template>
                  </el-table-column>
                </el-table>
            </el-tab-pane>
            </el-tabs>
            <!--添加参数的对话框-->
            <el-dialog
                :title="'添加'+titleText"
                :visible.sync="addDialogVisible"
                width="36%"
                @close="addHandleClose"
                >
                <el-form  :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
                    <el-form-item :label="titleText" prop="attr_name">
                        <el-input v-model="addForm.attr_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addParams">确 定</el-button>
                </span>
            </el-dialog>
            <!--修改参数的对话框-->
            <el-dialog
                :title="'修改'+titleText"
                :visible.sync="editDialogVisible"
                width="36%"
                @close="editHandleClose"
                >
                <el-form  :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
                    <el-form-item :label="titleText" prop="attr_name">
                        <el-input v-model="editForm.attr_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editParams">确 定</el-button>
                </span>
            </el-dialog>
       </el-card>
    </div>
</template>
<script>
export default{
    data(){
        return{
          catelist:[],  
          //选中的父级分类的id数组
          selectedKeys:[],
          //被激活的页签的名称
          activeName:'many',
          //动态参数的数据
          manyTableData:[],
          //静态参数的数据
          onlyTableData:[],
          //控制添加对话框的显示和隐藏
          addDialogVisible:false,
          //添加参数的表单数据对象
          addForm:{},
          //添加表单的验证规则对象
          addFormRules:{
            attr_name: [
              { required: true, message: '请输入参数名称', trigger: 'blur' }]
          },
          //控制显示修改对话框
          editDialogVisible:false,
          editForm:{},
          editFormRules:{
            attr_name: [
              { required: true, message: '请输入参数名称', trigger: 'blur' }]
          },
          //控制按钮和文本框的切换显示
          inputVisible:false,
          //文本框中输入的内容
          inputValue:''
       }
        
    },
    created(){
        this.getCateList()
    },
    methods:{
       //获取所有商品分类列表
       async getCateList(){
        const {data:res}= await this.$http.get('categories')
        if(res.meta.status!=200){
            return this.$message.error('获取商品分类失败')
        }
        this.catelist=res.data
       },
      //选择项发生 变化触发这个函数
      handleChange(){
        this.getParamsData()
        this.getParamsData()
     },
     //获取参数的列表数据
     async getParamsData(){
        //证明所选的不是第三级分类
        if(this.selectedKeys.length!==3){
            this.selectedKeys=[]
            this.manyTableData=[]
            this.onlyTableData=[]
            return
        }  
        //根据所选分类的ID，和当前所处的面板，获取对应的参数
       const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{params:{
            sel:this.activeName
        }})
        if(res.meta.status!=200){
            return this.$message.error('获取参数失败')
        }
        console.log(res.data)
        res.data.forEach(item => { 
            item.attr_vals=item.attr_vals ? item.attr_vals.split(' '):[]
            //控制文本框的显示与隐藏
            item.inputVisible=false
            //文本框中输入的值
        });
        console.log(res.data)
        if(this.activeName=='many'){
            this.manyTableData = res.data
        }else{
            this.onlyTableData=res.data
        }
      },
      //tab页签点击事件的处理函数
      handleTabClick(){
        this.getParamsData()
      },
      addHandleClose(){
          this.$refs.addFormRef.resetFields();
        },
      addParams(){
          this.$refs.addFormRef.validate(async valid=>{
            if(!valid) return
            const {data:res}=await this.$http.post(`categories/${this.cateId}/attributes`,{attr_name:this.addForm.attr_name,
                attr_sel:this.activeName})  
            if(res.meta.status!=201){
              return this.$message.error('添加参数失败')
        }
            console.log(res) 
            this.addDialogVisible= false
            this.getParamsData()
          })  
       },
       showEditDialog(row){
        this.editForm=row
        console.log(this.editForm)
        this.editDialogVisible=true 
       },
       //确定修改
       editParams(){
            this.$refs.editFormRef.validate(async valid=>{
                if(!valid) return
                const {data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,{attr_name:this.editForm.attr_name,
                    attr_sel:this.activeName})  
                if(res.meta.status!=200){
                return this.$message.error('修改参数失败')
            }
                this.editDialogVisible= false
                this.getParamsData()
            })  
       },
       editHandleClose(){
            this.$refs.editFormRef.resetFields();
       },
       async delParam(row){
            const confirmResult=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err=>err)  
            //用户取消了删除的操作
            if(confirmResult!=='confirm'){
                return this.$message.info('已取消删除')
            }
            const {data:res}=await this.$http.delete(`categories/${this.cateId}/attributes/${row.attr_id}`)
            if(res.meta.status!=200){
            return this.$message.error('删除参数失败')}
            this.getParamsData()
            return this.$message.success('成功删除')
       },
       //将对attr_vals的操作，保存到数据库
       async saveAttrvals(row){
          const {data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{attr_name:row.attr_name,
                attr_sel:this.activeName,attr_vals:row.attr_vals.join(' ')})  
          if(res.meta.status!=200){
              return this.$message.error('修改参数失败')
        }
            this.$message.success('成功修改参数')
            this.getParamsData()
       },
       //文本框失去焦点，或摁下了enter都会触发
       async handleInputConfirm(row){
            if(row.inputValue.trim().length===0){
                row.inputValue=''
                row.inputVisible=false
                return
            }
            //如果没有return则证明输入的内容，需要做后续的处理
            row.attr_vals.push(row.inputValue.trim())
            row.inputValue=''
            row.inputVisible=false
            this.saveAttrvals(row)
       },
       //点击按钮，展示文本输入框
       showInput(row){
          row.inputVisible=true
          //让文本框自动获得焦点  $nextTick作用：当页面上元素被重新渲染之后，才会指定回调函数中的代码
          this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
       },
       //移除标签
       async handleClose(i,row){
        row.attr_vals.splice(i,1)
        
       }
    },
    computed:{
        //如果按钮需要被禁用，则返回true，否则返回false
        isBtnDisabled(){
            if(this.selectedKeys.length!==3) return true
            return false      
        },
        //当前选中的三级分类的id
        cateId(){
            if(this.selectedKeys.length===3)
                return this.selectedKeys[2]
            return null } ,
        //动态计算标题的文本
        titleText(){
            if(this.activeName==='many'){
                return '动态参数'
            }
            return '静态属性'
        }
            
    }
}
</script>
<style lang="less" scoped>
.cat_opt {
    margin: 18px 6px;
}
.el-tag{
    margin: 20px;
    font-size: 16px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 100px;
    margin-left: 10px;
}
</style>